//定义Vue 登录组件
//必须有Elementui ，axios的支持
Vue.component("login", {
    props:["base-url"],
    data() {
        return {
            loginWinVisiable: false,
            regWinVisiable: false,
            pwdWinVisiable: false,
            forgetWinVisiable: false,
            user: {},
            reg: {account:"",pwd:"",name:"",phone:"",address:""},
            pwd: {},
            forget:{},
            m: true,
            errors: {},
        };
    },
    template: `
        <div>
            <el-dialog title="登陆窗口" :visible.sync="loginWinVisiable">
                <el-form>
                    <el-form-item label="用户名" label-width="100px">
                        <el-input v-model="user.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" label-width="100px">
                      <el-input v-model="user.password" autocomplete="off" show-password></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="loginWinVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="login">确 定</el-button>
                </div>
            </el-dialog>
            
            <el-dialog title="注册窗口" :visible.sync="regWinVisiable">
                <el-form>
                    <el-form-item label="用户名" label-width="100px">
                        <el-input v-model="reg.phone" autocomplete="off" style="width: 50%"></el-input>
                        <span style="color: red">{{errors.account}}</span>
                    </el-form-item>
                    <el-form-item label="密码" label-width="100px">
                      <el-input type="password" v-model="reg.password" autocomplete="off" style="width: 50%"></el-input>
                      <span style="color: red">{{errors.pwd}}</span>
                    </el-form-item>
                    <el-form-item label="姓名" label-width="100px">
                      <el-input v-model="reg.userName" autocomplete="off" style="width: 50%"></el-input>
                      <span style="color: red">{{errors.name}}</span>
                    </el-form-item>
                    <el-form-item label="身份证号码" label-width="100px">
                      <el-input v-model="reg.idNumber" autocomplete="off" style="width: 50%"></el-input>
                      <span style="color: red">{{errors.idNumber}}</span>
                    </el-form-item>
                    <el-form-item label="家庭地址" label-width="100px">
                      <el-input v-model="reg.address" autocomplete="off" style="width: 50%"></el-input>
                      <span style="color: red">{{errors.address}}</span>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="regWinVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="register">确 定</el-button>
                </div>
            </el-dialog>
            
            <el-dialog title="修改密码" :visible.sync="pwdWinVisiable">
                <el-form>
                    <el-form-item label="原密码" label-width="100px">
                        <el-input v-model="pwd.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" label-width="100px">
                      <el-input v-model="pwd.newPassword" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="pwdWinVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="modifyPwd">确 定</el-button>
                </div>
            </el-dialog>
            
             <el-dialog title="忘记密码" :visible.sync="forgetWinVisiable">
                <el-form>
                    <el-form-item label="用户名" label-width="100px">
                        <el-input v-model="forget.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" label-width="100px">
                      <el-input v-model="forget.vcode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" label-width="100px">
                      <el-input v-model="forget.newPassword" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="forgetWinVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="sendEmail">发送验证码</el-button>
                    <el-button type="primary" @click="modifyPwd1">修改密码</el-button>
                </div>
            </el-dialog>
        </div>
    `,
    methods: {
        login() {
            let p = new URLSearchParams();
            p.append("username", this.user.username);
            p.append("password", this.user.password);
            axios.post(this.baseUrl+"/login", p).then(res => {
                if (res.data.code == 1) {
                    this.$message(res.data.msg);
                    this.user = res.data.data;
                    //发布vue组件事件
                    this.$emit("logined", this.user);
                    this.loginWinVisiable = false;
                    if (res.data.data.backURI){
                        location.href = res.data.data.backURI;
                    }
                    if (location.search != "?tologin"){
                        location.reload();
                    }
                    // this.$forceUpdate();
                } else {
                    this.$alert(res.data.msg)
                }
            })
        },
        logout() {
            axios.post(this.baseUrl+"/logout").then(res => {
                if(this.m){
                    this.$message(res.data.msg);
                }
                this.m = true;
                this.user = {};
                //发布vue组件事件
                this.$emit("logined", null);
            })
            location.reload();
        },
        register(){
            axios.post(this.baseUrl+"/user/save", this.reg).then(res=>{
                if (res.data.code == 1){
                    this.$message(res.data.msg);
                    this.errors = {};
                    this.reg = {};
                    this.regWinVisiable = false;
                } else {
                    if (res.data.data){
                        // this.$alert(res.data.msg);
                        console.info(res.data.data);
                        this.errors = {};
                        for (let name in this.reg) {
                            let errMsg = res.data.data
                                .filter(err=> err.field == name)    // 过滤
                                .map(err=> err.defaultMessage)      // 转换 : {..}=>String
                                .join(",");
                            console.info(errMsg);
                            this.errors[name] = errMsg;
                        }
                        console.log(this.errors.phone)
                    } else {
                        this.errors = {};
                        console.log(res.data.msg);
                        this.errors.phone = res.data.msg;
                        console.log(this.errors.phone);
                    }
                }
            })
        },
        openPwdWin() {
          this.pwdWinVisiable = true;
        },
        openRegWin(){
            this.regWinVisiable = true;
        },
        openLoginWin() {
            this.loginWinVisiable = true;
        },
        openForgetWin() {
          this.forgetWinVisiable = true;
        },
        modifyPwd() {
            let p = new URLSearchParams();
            p.append("newPassword",this.pwd.newPassword || "");
            p.append("password",this.pwd.password || "");
            axios.post(this.baseUrl +"/modifyPwd",p).then(res => {
                if (res.data.code == 1){
                    this.$message(res.data.msg);
                    this.pwdWinVisiable = false;
                    this.m = false;
                    this.logout();
                }else {
                    this.$alert(res.data.msg);
                }
            })
        },
        sendEmail(){
            axios.post(this.baseUrl+"/forgetPwd?username=" + (this.forget.username || "")).then(res=>{
                if (res.data.code == 1){
                    this.$message(res.data.msg);
                }else {
                    this.$alert(res.data.msg);
                }
            })
        },
        modifyPwd1(){
            let p = new URLSearchParams();
            p.append("newPassword",this.forget.newPassword);
            p.append("vcode",this.forget.vcode);
            axios.post(this.baseUrl+"/modifyPwd1",p).then(res=>{
                if (res.data.code == 1){
                    this.$message(res.data.msg);
                    this.forgetWinVisiable = false;
                }else {
                    this.$alert(res.data.msg);
                }
            })
        }
    },
    created() {
        console.log(this.user);
        if(location.search == '?tologin'){
            this.openLoginWin();
        } else {
            axios.get(this.baseUrl+"/myinfo").then(res => {
                if (res.data.code) {
                    this.user = res.data.data;
                    this.$emit("logined", this.user);
                }
            })
        }
    }
})